<template>
  <div class="body">
      <dl v-for="item,i in list" :key="i">
          <dt>
              <img :src="item.img" alt="">
          </dt>
          <dd>
              <h4>{{item.title}}</h4>
              <p>{{item.name}}</p>
          </dd>
      </dl>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            num:1,
            list:[]
        }
    },
    beforeCreate() {
        console.log("要被创建了", this.num, this.$el); // undefined undefined
    },
    created() {
        console.log("我已经出生了", this.num, this.$el); // 1 undefined
    },
    // 挂载 -> 上户口
    beforeMount() {
        console.log(`我爹要给我上户口了`, this.num, this.$el); // 1 undefined
    },
    mounted() {
        console.log('已经上户口了',this.num,this.$el);
        axios.get('/list').then(res=>{
            console.log(res);
            this.list=res.data
        });
    },
    updated() {
        console.log(`上学后`, this.num, this.$el); // 1 外层body标签
    },
    // keep-alive激活 -> 施加魔法
    // 在父身上使用的时候，被keep-alive包起来
    activated() {
        console.log("keep-alive 展示", this.num, this.$el); // 1 外层body标签
    },
    // keep-alive失活 -> 取消魔法
    deactivated() {
        console.log("keep-alive 隐藏", this.num, this.$el); // 1 外层body标签
    },
    // 销毁 -> 死亡
    // 只会执行一次  **常用**
    beforeDestroy() {
        console.log("死之前", this.num, this.$el); // 1 外层body标签
    },
    destroyed() {
        console.log("死之后", this.num, this.$el); // 1 外层body标签
    },
}
</script>

<style>
    dl{
        width: 45%;
        height: 280px;
        display: inline-block;
    }
    dl>dt{
        width: 100%;
        height: 200px;
    }
    dl>dt>img{
        padding: 0 20px;
    }
    dl>dd{
        padding: 0 20px;
        width: 100%;
        height: 80px;
    }
    dl>dd>p{
        color: #ccc;
        
    }
</style>